<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-color: white;
      }

      @keyframes ColorChange {
        0% {
          outline: 1px solid lightgreen;
        }

        50% {
          outline: 1px solid green;
        }

        1000% {
          outline: 1px solid lightgreen;
        }
      }

      svg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
        outline: 1px solid red;
        animation: ColorChange 500ms ease infinite;
        transition: all linear 300;
      }

      line,
      polyline,
      rect {
        stroke-linecap: round;
        stroke-linejoin: round;
      }
    </style>
  </head>

  <body>
    <svg width="600"
         height="600"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink"
         preserveAspectRatio="xMinYMin meet"
         stroke-linecap="round"
         stroke-linejoin="round"
         viewBox="0 0 600 600">

      <!-- 第十二章 动画 -->

      <!-- 12.1 -->
      <rect x="10"
            y="10"
            width="200"
            height="20"
            stroke="black"
            fill="none">
        <!--
          attributeName：需要动画的属性名，这里是width
          attributeType：width 属性是一个 XML 属性。另一个常用的 attributeType 值是 CSS，表示我们想要改变的属性是一个 CSS 属性。如果忽略这一属性，它的默认值是 auto；它首先会搜索 CSS 属性，然后才是 XML 属性。
          from：起始值
          to：结束值
          begin：开始时间
          dur：持续时间
          fill：动画结束时做什么
            freeze：停在最后一帧
            remove：还原为原始值
        -->
        <animate attributeName="width"
                 attributeType="XML"
                 from="200"
                 to="20"
                 begin="0s"
                 dur="2s"
                 fill="freeze" />
      </rect>

      <!-- 单个对象多个动画 -->
      <rect x="110"
            y="10"
            width="20"
            height="20"
            style="stroke: black; fill: green; fill-opacity: 0.25;">
        <animate attributeName="width"
                 attributeType="XML"
                 from="20"
                 to="200"
                 begin="0s"
                 dur="2s"
                 fill="freeze" />
        <animate attributeName="height"
                 attributeType="XML"
                 from="20"
                 to="150"
                 begin="0s"
                 dur="1s"
                 fill="remove" />
        <animate attributeName="fill-opacity"
                 attributeType="CSS"
                 from="0.25"
                 to="1"
                 begin="0s"
                 dur="3s"
                 fill="freeze" />
        <animate attributeName="fill-opacity"
                 attributeType="CSS"
                 from="1"
                 to="0.25"
                 begin="3s"
                 dur="3s"
                 fill="freeze" />
      </rect>

      <rect x="10"
            y="10"
            width="20"
            height="20"
            style="stroke: black; fill: #cfc;">
        <animate attributeName="width"
                 attributeType="XML"
                 begin="0s"
                 dur="8s"
                 from="20"
                 to="120"
                 fill="freeze" />
        <animate attributeName="height"
                 attributeType="XML"
                 begin="0s"
                 dur="8s"
                 from="20"
                 to="120"
                 fill="freeze" />
      </rect>
      <circle cx="70"
              cy="70"
              r="20"
              style="fill: #ccf; stroke: black;">
        <animate attributeName="r"
                 attributeType="XML"
                 begin="2s"
                 dur="4s"
                 from="20"
                 to="50"
                 fill="freeze" />
      </circle>

      <!--
        12.2
        动画时间：
        svg动画时间在svg加载完成后开始计时，用户离开页面时停止计时
        时间表示可以为：
          时、分、秒形式（1:20:23）的完整时间值。
          分、秒形式（02：15）的局部时间值。
          以h（时）min（分）s（秒）或者ms（毫秒）缩写结尾的时间值，比如dur="3.5s" begin="1min"。
          不可以在值和单位之间插入任何空白，如果不指定时间默认为s（秒）。
      -->


      <!-- 12.3 同步动画 -->
      <circle cx="160"
              cy="60"
              r="30"
              style="fill: #f9f; stroke: gray;">
        <animate id="c1"
                 attributeName="r"
                 attributeType="XML"
                 begin="0s"
                 dur="4s"
                 from="30"
                 to="10"
                 fill="freeze" />
      </circle>
      <circle cx="220"
              cy="60"
              r="10"
              style="fill: #9f9; stroke: gray;">
        <!-- begin="c1.begin+1.25s"表示在c1的动画开始1.25秒后开始播放动画 -->
        <animate attributeName="r"
                 attributeType="XML"
                 begin="c1.begin+1.25s"
                 dur="4s"
                 from="10"
                 to="30"
                 fill="freeze" />
      </circle>



      <!--
        end属性：暂停动画
          end="id.end"，id元素结束时停止播放
          end="9s"，文档载入后9秒时暂停，如果动画总时长在10s，那么最终动画会停在90%处。
      -->

      <!-- 12.4 重复动作 -->
      <!--
        repeatCount：重复次数，无限次为indefinite
        repeatDur：重复需要持续多久，无限时间为indefinite
      -->
      <circle r="100"
              cx="130"
              cy="250"
              fill="#ff0000"
              stroke="black">
        <animate id="rAnimate"
                 attributeName="r"
                 dur="2s"
                 from="0"
                 to="100"
                 repeatCount="indefinite"
                 repeatDur="indefinite" />
        <!-- begin="rAnimate.repeat(2)"：表示rAnimate的动画重复两次后的1.25s后开始播放 -->
        <animate attributeName="fill"
                 begin="rAnimate.repeat(2)+1.25s"
                 dur="2s"
                 from="#ff0000"
                 to="#ffff00"
                 fill="freeze" />
      </circle>



    </svg>


    <script>
      const ele = document.querySelector("#xxx");
      let n = 0;
      function Renderer() {
        n++;
        if (n >= 360) n = 0;
        window.requestAnimationFrame(Renderer);
      }
      Renderer();
    </script>
  </body>

</html>
